<template>
  <div class='pdf-container'>
    <div class='pdf-content'>
      <iframe :src='src' frameborder='0' width='100%' height='1200px'></iframe>
    </div>
  </div>
</template>

<script>
export default {
  components: {
    // Pdf,
  },
  props: {
    content: {
      type: String,
      default: true
    }
  },
  /*props: ['content'],*/
  data() {
    return {
      pageCount: 1,
      src: null
    }
  },
  created() {
    this.src = '/static/pdfjs/web/viewer.html?file=' + this.content
  },
  methods: {},
  computed: {}
}
</script>

<style lang='less' scoped>
.pdf-container {
  // height: 700px;
  overflow-y: auto;

  .tab-bar {
    width: 100%;
    display: flex;
    border-bottom: 1px solid #256bdd;
    height: 40px;
    line-height: 40px;
    box-sizing: border-box;
    user-select: none;

    li {
      padding: 0 25px;
      height: 100%;
      background-color: #fff;
      border-radius: 6px 6px 0 0;
      border: 1px solid rgb(201, 201, 201);
      box-sizing: border-box;
      border-bottom: none;
      color: rgb(201, 201, 201);
      cursor: pointer;

      &.active {
        border: 1px solid #256bdd;
        border-bottom: none;
        height: 41px;
        color: orange;
        font-weight: bold;
      }

      &.active:hover {
        color: orange;
        font-weight: bold;
      }

      &:hover {
        border-color: #256bdd;
        color: rgb(143, 143, 143);
      }
    }
  }
}
</style>
